<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试step</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <link rel="stylesheet" href="static/js/lay-module/step-lay/step.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.5.5/css/layui.css" />
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div class="layui-form layuimini-form" id="surveyForm" lay-filter="surveyForm">
                                <fieldset class="layui-elem-field layui-field-title" style="color: #009688">
                                    <legend>案件信息</legend>
                                </fieldset>
                                <table class="layui-hide" id="caseReport"></table>

                                <input type="hidden" name="claimmainid" class="layui-input">
                                <input type="hidden" name="casereportid" class="layui-input">
                                <input type="hidden" name="taskid" class="layui-input">
                                <fieldset class="layui-elem-field layui-field-title" style="color: #009688">
                                    <legend>查勘信息</legend>
                                </fieldset>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">查勘时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="surveylosstime" id="surveylosstime" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">事故类型</label>
                                        <div class="layui-input-inline">
                                            <select name="disposetype">
                                                <option value="1">单方事故</option>
                                                <option value="2">双方事故</option>
                                                <option value="3">三方事故</option>
                                                <option value="4">多方事故</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">联系电话</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="telphone" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">驾驶证</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="drivinglicence" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">行驶证</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="vehiclelicense" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">车架号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="carframeid" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">发动机号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="engineint" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">查勘地点</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="surveylossaddress" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">驾驶证是否有效</label>
                                        <div class="layui-input-inline">
                                            <input type="checkbox" value="1" name="iseffectivedrivinglicence" lay-skin="switch" lay-text="有效|无效" checked>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">行驶证是否有效</label>
                                        <div class="layui-input-inline">
                                            <input type="checkbox" value="1" name="iseffectivevehiclelicence" lay-skin="switch" lay-text="有效|无效" checked>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">是否超出行驶区域</label>
                                        <div class="layui-input-inline">
                                            <input type="checkbox" value="1" name="isoversteptravelregion" lay-skin="switch" lay-text="是|否">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">是否装载危险货物</label>
                                        <div class="layui-input-inline">
                                            <input type="checkbox" value="1" name="isloaddangerousgoods" lay-skin="switch" lay-text="是|否">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">是否违规装载</label>
                                        <div class="layui-input-inline">
                                            <input type="checkbox" value="1" name="isviolationload" lay-skin="switch" lay-text="是|否">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">标的车出现前是否有缺陷</label>
                                        <div class="layui-input-inline">
                                            <input type="checkbox" value="1" name="isbeforedangerdefect" lay-skin="switch" lay-text="是|否">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">查勘意见</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="请输入内容" name="prospectdisposeidea" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">损失情况</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="请输入内容" name="lossinfo" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item" pane="">
                                    <div class="layui-form-item" pane="">
                                        <label class="layui-form-label">责任判断</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="duty" value="1" title="全部责任" checked="">
                                            <input type="radio" name="duty" value="2" title="主要责任">
                                            <input type="radio" name="duty" value="3" title="同等责任">
                                            <input type="radio" name="duty" value="4" title="次要责任">
                                            <input type="radio" name="duty" value="5" title="无责任">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">比例</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="dutyratio" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">维修点</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="maintenancepoint" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <%--    <div class="layui-form-item">
                                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                            <legend>上传图片</legend>
                                        </fieldset>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn1">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img1">
                                                <p id="imgText1"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn2">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img2">
                                                <p id="imgText2"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn3">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img3">
                                                <p id="imgText3"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn4">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img4">
                                                <p id="imgText4"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn5">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img5">
                                                <p id="imgText5"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn6">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img6">
                                                <p id="imgText6"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn7">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img7">
                                                <p id="imgText7"></p>
                                            </div>
                                        </div>
                                        <div class="layui-upload layui-inline">
                                            <button type="button" class="layui-btn" id="imgBtn8">上传图片</button>
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img"v width="92px" id="img8">
                                                <p id="imgText8"></p>
                                            </div>
                                        </div>
                                    </div>--%>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="tempSave">暂存</button>
                                        <button class="layui-btn" lay-submit lay-filter="commitBtn">提交</button>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">游戏ID:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">639537</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账户余额:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">入款金额:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span style="font-size: 18px;color: #333;">1800 元</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">入款类型:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">保险箱</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">入款方式:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">人工入款</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注说明:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">备注说明</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认入款&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        入款成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再入一笔</button>
                                    <button class="layui-btn layui-btn-primary">查看账单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="static/lib/layui-v2.5.5/layui.js"></script>
<script src="static/js/lay-config.js"></script>
<script>
    layui.use(['form','jquery','step'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            step = layui.step;


        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '基本信息'
            }, {
                title: '文件上传'
            }, {
                title: '完成'
            }]
        });


        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });



    })
</script>
</body>
</html>
